<template>
    <div class="app-container">
        <el-page-header @back="goBack" content="订单详情"></el-page-header>
        <br>
        <el-descriptions :column="2" size="medium" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-goods"></i>
                    订单号
                </template>
                {{ orderDetail.orderId }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-monitor"></i>
                    订单状态
                </template>
                <el-tag v-if="orderDetail.status === 1" type="danger" effect="dark">未支付</el-tag>
                <el-tag v-else-if="orderDetail.status === 2" effect="dark">未发货</el-tag>
                <el-tag v-else-if="orderDetail.status === 3" type="warning" effect="dark">未收货</el-tag>
                <el-tag v-else-if="orderDetail.status === 4" type="success" effect="dark">已收货</el-tag>
                <el-tag v-else-if="orderDetail.status === 5" type="info" effect="dark">已关闭</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    下单用户
                </template>
                {{ orderDetail.username }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-time"></i>
                    下单时间
                </template>
                {{ orderDetail.createDate }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-alarm-clock"></i>
                    支付时间
                </template>
                <span v-if="orderDetail.payDate">{{ orderDetail.payDate }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    收件人
                </template>
                <span v-if="orderDetail.receiveUsername">{{ orderDetail.receiveUsername }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    收件地址
                </template>
                <span v-if="orderDetail.receiveAddress">{{ orderDetail.receiveAddress }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-phone-outline"></i>
                    收件人联系方式
                </template>
                <span v-if="orderDetail.receivePhone">{{ orderDetail.receivePhone }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-news"></i>
                    订单总额
                </template>
                <span v-if="orderDetail.totalPrice">{{ orderDetail.totalPrice }}元</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile"></i>
                    支付方式
                </template>
                <span v-if="orderDetail.payWay">{{ orderDetail.payWay }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-shopping-cart-1"></i>
                    配送方式
                </template>
                <el-tag type="success" v-if="orderDetail.distributionMode === '官方直送'">{{
                        orderDetail.distributionMode
                    }}
                </el-tag>
                <el-tag type="warning" v-else-if="orderDetail.distributionMode === '站点配送'">{{
                        orderDetail.distributionMode
                    }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-document"></i>
                    快递单号
                </template>
                <span v-if="orderDetail.trackingNumber">{{ orderDetail.trackingNumber }}</span>
            </el-descriptions-item>
        </el-descriptions>
        <br>
        <el-divider></el-divider>
        <el-table v-if="orderDetail.orderItems.length !== 0" :data="orderDetail.orderItems" style="width: 100%" size="medium"
                  border
                  stripe>
            <el-table-column prop="name" label="书名" align="center">
            </el-table-column>
            <el-table-column label="缩略图" align="center">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.cover" :src="scope.row.cover" style="height: 100px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="价格" align="center">、
                <template slot-scope="scope">
                    <span v-if="scope.row.price">{{ scope.row.price }}元</span>
                </template>
            </el-table-column>
            <el-table-column label="购买数量" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.num">{{ scope.row.num }}本</span>
                </template>
            </el-table-column>
            <el-table-column label="小记" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.totalPrice">{{ scope.row.totalPrice }}元</span>
                </template>
            </el-table-column>
        </el-table>

        <el-empty v-else description="暂无图书信息" :image-size="200"></el-empty>
    </div>
</template>

<script>
import {getOrderById} from '@/api/order'

export default {
    data() {
        return {
            orderDetail: {}
        }
    },
    methods: {
        goBack() {
            this.$router.push("/order/orderList")
        }
    },
    created() {
        let orderId = this.$route.query.orderId
        getOrderById(orderId).then(response => {
            this.orderDetail = response.data
        })
    }
}
</script>

<style>
.app-container {
    margin: 20px;
}
</style>
